<template>
	<view class="safe-area-inset-bottom">
		<view class="item_block" v-for="(item, index) in dataList" :key="index">
			<view class="title">
				<view class="title_line"></view>
				<view class="title_name">{{item.title}}</view>
			</view>
			<view @click="chooseMocard(item.cardId)" class="item">
					<image mode="widthFix" :src="item.img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import temps from '../../config/07661147132B19AF610079408E24C660.js'
	export default {
		data() {
			return {
				list: [{name: '侧边式'}, {name: '插入式'}, {name : '底部式'}],
				dataList: [
					{
						title: '1竖图4横图',
						img: 'https://qkj.cdgsxq.com/card_1.png',
						cardId: 1001010501
					},
					{
						title: '4竖图2横图',
						img: 'https://qkj.cdgsxq.com/card_2.png',
						cardId: 1001010601
					},
					{
						title: '5竖图2横图',
						img: 'https://qkj.cdgsxq.com/card_3.png',
						cardId: 1001010701
					},{
						title: '7竖图3横图',
						img: 'https://qkj.cdgsxq.com/card_4.png',
						cardId: 1001011001
					}
				]
			}
		},
		methods: {
			chooseMocard(id) {
				let cardIndex = temps.getIndexByCardId(parseInt(id))  // 返回下标
				console.log(cardIndex)
				uni.setStorageSync('cardid', cardIndex)
				let tempItem = temps.layouts[cardIndex]
				uni.chooseImage({
					count: tempItem.maxCount,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						let imgs = res.tempFilePaths;
						uni.setStorageSync('selectedPhotos', imgs);
						if(imgs.length >= tempItem.maxCount) {
							uni.navigateTo({
								url: '/pages/personal/regsiter'
							})
						} else {
							// 继续选择
							uni.navigateTo({
								url: '/pages/moka/choosephoto'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item_block {
	    padding-top: 10rpx;
	}
	
	.title {
	    height: 44rpx;
			background-color: #f7f8fa;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 50rpx 30rpx;
	}
	
	.title_line {
	    width: 6rpx;
	    height: 30rpx;
	    background-color: #ffdc00;
	    margin-top: 3rpx;
	    border-radius: 3rpx;
	}
	
	.title_name {
	    height: 37rpx;
	    font-size: 26rpx;
	    font-weight: 400;
	    color: #333;
	    line-height: 37rpx;
	    padding-left: 15rpx;
	}
	
	.title_icon {
	    width: 20rpx;
	    height: 44rpx;
	}
	
	.item {
	    padding: 0;
	}
	
	.item,.item image {
	    width: 100%;
	}
</style>
